/**
 * title: ref
 * description: 父组件可以通过`ref`挂载的两个 `api` 。一个是 `resize` ，一个是 `getArchData` 。 `resize` 重置画布尺寸。 `getArchData` 获取画布上数据
 */
import React, { useRef } from 'react';
import { Button, Modal, Space } from 'antd';
import data from '../base/demoData.json';
import moduleConfig from '../base/moduleConfig';
import assets from '../../../assets';
import Arch from '@rasir/x6-arch';
import registerList from '../base/register';
import 'antd/dist/antd.css';

const App = () => {
  const ref = useRef();

  const onCreateNode = (nodeData) => {
    const { name, preId, moduleType } = nodeData;
    return Promise.resolve({
      id: Date.now() + '',
      name,
      shape: 'arch-node',
      type: 'node',
      preId,
      moduleType,
    });
  };

  const getData = () => {
    Modal.info({
      title: '画布数据',
      width: '80%',
      centered: true,
      closable: true,
      okText: '确定',
      content: (
        <div style={{ height: 300, overflowX: 'hidden' }}>
          {JSON.stringify((ref.current as any).getArchData())}
        </div>
      ),
    });
  };

  const resize = () => {
    (ref.current as any).resize();
  };

  return (
    <div>
      <Space size={10}>
        <Button size="small" onClick={getData}>
          获取画布数据
        </Button>
        <Button size="small" onClick={resize}>
          重置画布尺寸
        </Button>
      </Space>
      <Arch
        data={data}
        ref={ref}
        moduleConfig={moduleConfig}
        assets={assets}
        appendActions={<div>hello</div>}
        registerList={registerList}
        defaultNodeShape="node"
        defaultEdgeShape="link"
        onCreateNode={onCreateNode}
        cache={false}
        onChange={(data) => {}}
      />
    </div>
  );
};

export default App;
